<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16">
      <a-col :md="20" :lg="16">
        <a-form>
          <a-form-item label="数据源">
            <a-select
              style="width: 100%"
              placeholder="请选择数据源"
              v-model="queryParam.dbsource">
              <a-select-option v-for="(dbSource,index) in dbSources" :key="dbSource.id" :value="dbSource.id">
                {{ dbSource.sourceName }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="sql代码输入框" style="min-height: 120px">
            <j-code-editor
              language="sql"
              v-model="queryParam.sql"
              :fullScreen="true"
              style="min-height: 100px"/>
          </a-form-item>
          <a-button @click="searchQuery" type="primary">提交</a-button>
          <a-button style="margin-left: 8px">重置</a-button>
          <a-button @click="generateCode" style="margin-left: 8px">生成</a-button>
          <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
          >

          </a-form-item>
        </a-form>

      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="6">
        <a-form-item label="主查询URL">
          <a-input placeholder="请输入主查询URL" v-model="queryParam.qryUrl"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="一级菜单名">
          <a-input placeholder="请输入一级菜单名" v-model="queryParam.menuName1"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="二级菜单名">
          <a-input placeholder="请输入二级菜单名" v-model="queryParam.menuName2"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="系统功能编码">
          <a-input placeholder="请输入系统功能编码" v-model="queryParam.systemCode"></a-input>
        </a-form-item>
      </a-col>

      <a-col :span="6">
        <a-form-item label="弹窗表格查询URL">
          <a-input placeholder="请输入弹窗表格查询URL" v-model="queryParam.popupTableUrl"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{  y: 600 }"
        @change="handleTableChange">
        <template
          v-for="col in ['rowNumber','columnName', 'columnText']"
          :slot="col"
          slot-scope="text, record, index"
        >
          <div :key="col">
            <a-input
              style="margin: -5px 0"
              :value="text"
              @change="e => handleChange(e.target.value, record.columnName, col,record)"
            />
          </div>
        </template>
        <template slot="queryParamType" slot-scope="text, record, index">
          <div >
            <a-select :value="text" placeholder="请选择参数类型" @change="val=>handleChange(val,record.columnName,'queryParamType',record)">
              <a-select-option value="none">None</a-select-option>
              <a-select-option value="all">全匹配</a-select-option>
              <a-select-option value="like">模糊匹配</a-select-option>
              <a-select-option value="range">范围匹配</a-select-option>
            </a-select>

          </div>
        </template>

        <template slot="countType" slot-scope="text, record, index">
          <div >
            <a-select :value="text" placeholder="请选择统计类型" @change="val=>handleChange(val,record.columnName,'countType',record)">
              <a-select-option value="none">None</a-select-option>
              <a-select-option value="sum">SUM</a-select-option>
              <a-select-option value="count">COUNT</a-select-option>
            </a-select>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleDelete(record)">删除</a>
          <a-divider type="vertical"/>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->
  </div>
</template>

<script>
  import {filterObj} from '@/utils/util';
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import Vue from 'vue'
  // 引入搜索部门弹出框的组件
  import {ACCESS_TOKEN} from "@/store/mutation-types"
  import {getAction, httpAction, putAction, postAction} from '@/api/manage'
  import {editSelf} from '@/api/api'
  import JCodeEditor from '@/components/jeecg/JCodeEditor'

  export default {
    mixins: [JeecgListMixin],
    components: {
      JCodeEditor
    },
    data() {
      return {
        javaCode: '',
        dbSources: [],
        columns: [
          {
            title: '位置',
            align: "center",
            dataIndex: 'rowNumber',
            width:120,
            scopedSlots: {customRender: 'rowNumber'},
          },
          {
            title: '字段',
            align: "center",
            dataIndex: 'columnName',
            width:250,
            scopedSlots: {customRender: 'columnName'},
          },
          {
            title: '列名称',
            align: "center",
            width:250,
            dataIndex: 'columnText',
            scopedSlots: {customRender: 'columnText'},
          },
          {
            title: '参数类型',
            align: "center",
            width:160,
            dataIndex: 'queryParamType',
            scopedSlots: {customRender: 'queryParamType'},
          },
          {
            title: '统计类型',
            align: "center",
            width:160,
            dataIndex: 'countType',
            scopedSlots: {customRender: 'countType'},
          },
          {
            title: '数据类型',
            align: "center",
            width:220,
            dataIndex: 'columnClassName'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        url: {
          list: "/dbms/autoCode/querySqlColumns",
          generateCode: "/dbms/autoCode/generateCode",
          delete: "/ss/ssMaterialLeaseRecord/delete",
          deleteBatch: "/ss/ssMaterialLeaseRecord/deleteBatch",
        },
      }
    },
    created() {
      getAction("/dbms/dbmsDbsource/listAll", "").then((res) => {
        if (res.success) {
          this.dbSources = res.result;
        }
      });
    },
    methods: {
      // onSelectChange(value,key,column){
      //   console.log(value);
      // },
      handleDelete(record) {
        const dataSource = [...this.dataSource];
        this.dataSource = dataSource.filter(item => item.columnName !== record.columnName);
      },
      handleChange(value, key, column,record) {
        // console.log(record);
        // console.log(this.dataSource);
        record[column]=value;
        // console.log(record);
        // console.log(this.dataSource);
        // const newData = [...this.dataSource];
        // const target = newData.filter(item => key === item.columnName)[0];
        // if (target) {
        //   target[column] = value;
        //   this.dataSource = newData;
        // }
      },
      generateCode() {
        var params = this.getQueryParams();
        console.log(params);
        console.log(this.dataSource);
        params.sqlColumnList = this.dataSource;
        console.log(params);
        postAction(this.url.generateCode, params).then((res) => {
          console.log(res, "res");
        })
      },
      loadData(arg) {
        this.loading = true;
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        this.ipagination.pageSize = 100;
        var params = this.getQueryParams();//查询条件
        postAction(this.url.list, params).then((res) => {
          this.loading = false;
          if (res.success) {
            this.dataSource = res.result;
            this.ipagination.total = res.result.length;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .avatar-upload-wrapper {
    height: 200px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      max-width: 180px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

  }
</style>